import {getHospitalFromId, getLoginUser, getUserRegisterInfo}
    from "../utils/common_network.js";
import popupInfo from "../../components/popupInfo.js";
import {appointmentTimeFromType, exist} from "../../utils.js";

export default {
    components: {
        'popup-info': popupInfo,
    },
    props: {
        id: String
    },
    setup(props) {
        const hospital = Vue.ref({name: "医院名称"});
        const user = Vue.ref({name: "姓名"});
        const popup = Vue.ref(null);
        const router = VueRouter.useRouter();
        const registerInfoList = Vue.ref([{
            departmentName: "科室名",
        }]);
        const selectedRIndex = Vue.ref(0);

        function backToIndex() {
            router.push({path: '/'});
        }

        Vue.onMounted(async () => {
            getHospitalFromId(props.id, hospital);
            await getLoginUser(popup, backToIndex, user);
            getUserRegisterInfo(props.id, registerInfoList);
        });

        function onRClick(index) {
            selectedRIndex.value = index;
        }

        const selectedRItem = Vue.computed({
            get() {
                const r = registerInfoList.value[selectedRIndex.value];
                if (r !== undefined) {
                    return r;
                }
                return undefined;
            }
        })
        const getRType = () => {
            if (selectedRItem.value['expert'] === true) {
                return "专家号";
            }
            return "普通号";
        };

        const getComeTime = () => {
            if (exist(selectedRItem.value['comeTime'])) {
                return selectedRItem.value['comeTime'];
            }
            return "尚未就诊";
        };

        const getPayNumber = () => {
            if (selectedRItem.value['expert']) {
                return "20";
            }
            return "12";
        };

        function getRStyle(index) {
            if (index === selectedRIndex.value) {
                return {
                    'background': 'rgb(125, 183, 203)',
                    'border-radius': '15px',
                }
            }
            return {};
        }

        function getAppointmentTime() {
            // return selectedRItem;
            return `${selectedRItem.value['appointmentDay']} ` +
                `${appointmentTimeFromType(selectedRItem.value['appointmentTimeType'])}`;
        }

        function dataURLToBlob(dataurl) {
            let arr = dataurl.split(",");
            let mime = arr[0].match(/:(.*?);/)[1];
            let bstr = atob(arr[1]);
            let n = bstr.length;
            let u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {type: mime});
        }

        function saveImage() {
            let a = document.createElement("a");
            html2canvas(captureDom.value, {
                windowWidth: 500,
                windowHeight: 780
            }).then((canvas) => {
                let dom = document.body.appendChild(canvas);
                dom.style.display = "none";
                a.style.display = "none";
                document.body.removeChild(dom);
                let blob = dataURLToBlob(dom.toDataURL("image/png"));
                a.setAttribute("href", URL.createObjectURL(blob));
                //这块是保存图片操作  可以设置保存的图片的信息
                a.setAttribute("download", selectedRItem.value['id'] + ".png");
                document.body.appendChild(a);
                a.click();
                URL.revokeObjectURL(blob);
                document.body.removeChild(a);
            });
        }

        const captureDom = Vue.ref(null);

        return {
            hospital, router, user, popup,
            registerInfoList, selectedRIndex,
            onRClick, selectedRItem, getRType,
            getComeTime, getPayNumber, getRStyle,
            getAppointmentTime, captureDom, saveImage
        }
    },
    template: `<div style="padding-top: 40px; padding-bottom: 40px; height: 100%;" class="container-fluid">
    <popup-info ref="popup"></popup-info>
    <div class="row nss-font" style="height: 100%;">
        <div style="border-right: 1px solid;height: 100%;" class="col-md-4">
            <div style="height: 100%; background: linear-gradient(rgba(202,220,227,1) 19.084%,rgba(255,255,255,1) 80.916%); margin-left: 40px; margin-right: 40px; margin-top: 0; padding-top: 20px;">
                <div style="height: 80%; max-height: 80%; border-bottom: 1px solid;">
                    <div style="width: 80%; text-align: center; font-size: 30px; margin-left: 10%; margin-right: 10%;background: rgb(221, 221, 221);">
                        挂号记录
                    </div>
                    <div style="overflow-y: scroll;margin-bottom: 0;height: 90%;
                        overflow-x: hidden;">
                        <div v-for="(item, index) in registerInfoList"
                            @click="onRClick(index)"
                            :style="getRStyle(index)"
                            class="row" style="font-size: 20px; padding: 10px 15px;
                            cursor: pointer;margin: 0 15px;">
                            <div style="text-align: center;" class="col-md-7">
                                {{item.appointmentDay}}
                            </div>
                            <div style="text-align: center;" class="col-md-5">
                                {{item.departmentName}}
                            </div>
                        </div>
                    </div>
                </div>
                <div style="text-align: center; padding-top: 20px; font-size: 20px;
                    cursor: pointer;" 
                    class="my-font" @click="saveImage">
                    打印凭条预览
                </div>
            </div>
        </div>
        <div style="height: 100%;" class="col-md-8">
            <div class="row" style="height: 100%;" v-show="selectedRItem !== undefined">
                <div class="col-md-2">
                </div>
                <div class="col-md-8" style="border: 1px solid; padding: 40px 20px;height: 100%;
                    overflow-y: scroll;" ref="captureDom">
                    <div style="font-size: 30px; text-align: center; padding-bottom: 20px;">
                        {{hospital.name}}挂号单
                    </div>
                    <div style="font-size: 30px; text-align: left; padding-bottom: 20px;">单据号：{{selectedRItem.id}}
<!--                    {{selectedRItem}}-->
                        <br>
                        医保卡号：{{user.id2}}
                        <br>
                        姓名：{{user.name}}
                    </div>
                    <div style="font-size: 26px; padding-bottom: 20px;border: 1px solid;
                        padding-top: 20px;">
                        挂号科室：{{selectedRItem.departmentName}}
                        <br>
                        挂号类型：{{getRType()}}
                        <br>
                        挂号医生：{{selectedRItem.doctorName}}
                        <br>
                        就诊时间：{{getComeTime()}}
                        <br>
                        挂号时间：{{selectedRItem.registerTime}}
                        <br>
                        预约时间：{{getAppointmentTime()}}
                        <br>
                        <br>
                        <br>
                        本次共支付：{{getPayNumber()}}
                        元
                    </div>
                    <div style="font-size: 20px;">
                        1、请妥善保管您的凭条
                        <br>
                        2、如有疑问请向医院工作人员咨询
                    </div>
                </div>
                <div class="col-md-2">
                </div>
            </div>
        </div>
    </div>
</div>`
}